<template>
  <div class="choosetheformat">
    <top-header style="border-bottom: 1px solid #ededed;position: fixed;z-index: 999;">
      <div slot="nav-left" style="line-height: 30px;">
        <img style="height: 44px;display: inline-table;" src="../../../assets/img/esin.png" alt="易信">
        <span class="newLogo-right">商家中心</span>
      </div>
      <div slot="nav-right">
        <ul class="nav">
          <li index="1" style="color: #fff;" @click="handleToPage('about')">联系我们</li>
          <li index="4" style="color: #fff;" @click="handleToPage('problem')">常见问题</li>
          <li index="4" style="color: #fff;" @click="providerApplyHandle">服务商入驻</li>
          <li index="4" style="color: #fff;" @click="logoutHandle()">注销</li>
          <!-- <router-link :to="{ path: 'providerApply' }">服务商入驻 ></router-link>-->
        </ul>
      </div>
    </top-header>
    <div class="container" style="padding-top: 80px;" v-loading="dataListLoading">
      <el-tabs v-model="dataForm.formatState" type="card" @tab-click="handleClick">
        <el-tab-pane label="酒店" name="0"></el-tab-pane>
      </el-tabs>
      <el-card class="box-card" style="width: 100%;">
        <div slot="header" class="clearfix">
          <span>门店列表</span>
          <span class="el-icon-refresh" style="cursor: pointer;" @click="init"></span>
          <el-button @click="creatStoresHandle" v-if="dataList.length != 0" style="float: right; padding: 3px 0" type="text">新建门店</el-button>
          <el-form style="margin-top: 10px;" :inline="true" :model="dataForm" class="demo-form-inline">
            <el-form-item label-width="0">
              <el-input v-model="dataForm.key" placeholder="名称/联系人/电话/地址"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getDataList">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="adminSeller" v-if="adminShow">进入总部</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="dataList.length == 0" style="text-align: center;">
          <i class="el-icon-document" style="font-size: 50px;margin: 28px 0px 18px 0px;"></i>
          <p style="margin-bottom: 18px;">空空如也，<el-button @click="creatStoresHandle" type="text">立即创建</el-button>
          </p>
        </div>
        <el-row>
          <el-col :span="10" v-for="(item,index) in dataList" :key="index" :offset="index % 2 == 0 ? 1 : 2" style="margin-bottom: 20px;">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div style="overflow: hidden;height: 100px;margin: 10px;">
                    <img :src="item.ewmLogo" class="image" v-if="item.ewmLogo">
                    <img src="../../../assets/img/no-img1.png" class="image" v-else>
                  </div>
                </el-col>
                <el-col :span="16">
                  <div style="padding: 14px;">
                    <span>{{item.name}}</span>
                    <div class="bottom clearfix">
                      <p class="time">{{ item.address }}</p>
                      <!-- 1待审核,2通过，3拒绝-->
                      <el-button type="text" class="button" v-if="item.state == 2" @click="selectSeller(item)">进入管理</el-button>
                      <el-button type="text" class="button" v-if="item.state == 1" disabled>待审核</el-button>
                      <el-popover v-if="item.state == 3" placement="top" trigger="hover" width="160">
                        <p style="line-height: 20px;margin-bottom: 10px;">{{item.stateMsg ? item.stateMsg : '暂无原因'}}</p>
                        <div style="text-align: right;">
                          <el-button type="primary" size="mini" @click="againSubmit(item)">重新提交</el-button>
                        </div>
                        <el-button slot="reference" type="text" class="button" v-if="item.state == 3">
                          审核失败
                          <i class="el-icon-question"></i>
                        </el-button>
                      </el-popover>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-card>

    </div>
    <!-- 创建门店-->
    <apply ref="apply" @refreshDataList="getDataList" v-if="applyVisible"></apply>
    <providerApply ref="providerApply" @refreshDataList="getDataList" v-if="providerApplyVisible"></providerApply>
  </div>

</template>


<script>
  import {
    clearLoginInfo
  } from '@/utils';
  import apply from './apply.vue'
  import providerApply from './providerApply.vue'
  export default {
    data() {
      return {
        adminShow: false,
        applyVisible: false,
        providerApplyVisible: false,
        dataListLoading: false,
        dataForm: {
          key: "",
          formatState: '0'
        },
        dataList: []
      };
    },
    components: {
      apply,providerApply
    },
    mounted: function() {

    },
    created() {
      this.init()
    },
    methods: {
      handleToPage(name) {
        this.$router.push({
          name
        });
      },
      adminSeller() {
        this.$http({
          url: this.$http.adornUrl(`/sys/user/choose_the/admin`),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.visible = false
            this.$message({
              message: this.$t('Common.OperationSuccessful'),
              type: 'success',
              duration: 1500,
              onClose: () => {}
            })
            this.$router.replace({
              name: "home"
            });
          } else {
            this.$message.error(data.msg);
          }
        })
      },
      handleClick(tab, event) {
        console.log(tab, event);
        this.getDataList();
      },
      againSubmit(item) {
        this.applyVisible = true
        this.$nextTick(() => {
          item = {
            ...item,
            sellerName: item.name,
            type: item.star,
            roomCount: 1
          }
          this.$refs.apply.init(item, 2)
        })
      },
      creatStoresHandle() {
        this.applyVisible = true
        this.$nextTick(() => {
          this.$refs.apply.init({}, 1)
        })
      },
      providerApplyHandle() {
        this.providerApplyVisible = true
        this.$nextTick(() => {
          this.$refs.providerApply.init()
        })
      },
      selectSeller(item) {
        this.$http({
          url: this.$http.adornUrl(`/sys/user/choose_the/${item.id}`),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            console.log('data', data)
            this.$router.replace({
              name: "home"
            });
          } else {
            this.$message.error(data.msg);
          }
        })
      },
      init() {
        this.getDataList();
      },
      getDataList() {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sys/user/choose_the_format'),
          method: 'get',
          params: this.$http.adornParams({
            'key': this.dataForm.key,
            'formatState': this.dataForm.formatState
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            console.log(data)
            this.adminShow = false;
            console.log(data)
            if (data.data.admin == 1) {
              this.dataList = data.data.list
              this.adminShow = true;
            } else {
              this.dataList = data.data.list
              console.log(this.dataList)
            }
          } else {
            this.dataList = []
          }
          this.dataListLoading = false
        })
      },

      // 退出
      logoutHandle() {
        this.$confirm(`确定进行[退出]操作?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            this.$http({
              url: this.$http.adornUrl('/sys/logout'),
              method: 'post',
              data: this.$http.adornData()
            }).then(({
              data
            }) => {
              if (data && data.code === 0) {
                clearLoginInfo();
                this.$router.push({
                  name: 'login'
                });
              }
            });
          })
          .catch(() => {});
      }
    }
  };
</script>

<style scoped>
  ul li {
    list-style-type: none;
  }

  .container {
    width: 1200px;
    margin: 0 auto;
  }

  #granted-hotels {
    margin-bottom: 1em;
  }

  #granted-hotels li {
    float: left;
    margin-left: 1em;
    margin-top: 20px;
  }

  #granted-hotels li a {
    background-color: #599bb3;
    border-radius: 15px;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    padding: 32px 32px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #3d768a;
  }

  .choosetheformat .time {
    font-size: 13px;
    width: 70%;
    line-height: 25px;
    color: #999;
  }

  .choosetheformat .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .choosetheformat .button {
    padding: 0;
    float: right;
  }

  .choosetheformat .image {
    width: 100%;
    display: block;
  }

  .choosetheformat .clearfix:before,
  .choosetheformat .clearfix:after {
    display: table;
    content: "";
  }

  .choosetheformat .clearfix:after {
    clear: both
  }

  .choosetheformat .el-tabs__header.is-top {
    margin-bottom: 0;
  }

  .choosetheformat .el-card.box-card {
    border-top: none;
  }

  .choosetheformat .demo-form-inline .el-form-item {
    margin-bottom: 0px;
  }
</style>
